<template>
  <view>
    <view class="top">
      <view class="left">
        <u-tabs
          font-size="32"
          :list="list"
          :is-scroll="false"
          :current="current"
          @change="change"
          active-color="#F4333C"
          class="tab"
        ></u-tabs>
        <!-- <view :class="num == 1 ? 'top-top' : 'top-second'" @click="num = 1">
          <view>
            <view class="top" v-if="num == 1"> 1 </view>
            <span class="sp">关注</span>
            <view class="but" v-if="num == 1"> </view>
          </view>
        </view>
        <view :class="num == 2 ? 'top-top' : 'top-second'" @click="num = 2">
          <view class="top"> </view>
          <span class="sp">精选</span>
          <view class="but" v-if="num == 2"> </view>
        </view>
        <view :class="num == 3 ? 'top-top' : 'top-second'" @click="num = 3">
          <view class="top"> </view>
          <span class="sp">圈子</span>
          <view class="but" v-if="num == 3"> </view>
        </view> -->
      </view>
      <view class="right">
        <view class="right-user">
          <image
            @tap="gotofriends"
            src="@/static/community/add.png"
            class="addImg"
          ></image>
        </view>
        <view class="right-search">
          <image class="search" src="@/static/community/search.png"></image>
        </view>
      </view>
    </view>
    <view class="center">
      <view class="kb"> </view>
      <community-follow v-if="current == 0"></community-follow>
      <community-selected v-if="current == 1"></community-selected>
      <community-circle v-if="current == 2"></community-circle>
    </view>
    <image
      class="postsImg"
      @tap="publishComment"
      src="@/static/community/fly.png"
    ></image>
    <!-- 评论选择 -->
    <view>
      <u-popup v-model="showComment" mode="bottom">
        <view class="checkComment">
          <view class="email-box">
            <view class="share">分享你的点滴</view>
            <view class="email" @tap="gotodrafts">
              <u-icon name="email" color="#444" size="40"></u-icon>
              <view class="title">草稿箱</view>
              <view>(5)</view>
            </view>
          </view>
          <view class="check">
            <view class="posts" @tap="goSpots((type = 'img'))">
              <image src="@/static/active/posts.png"></image>
              <!-- <view style="line-height: 100rpx">帖子</view>
              <u-icon name="file-text" color="#fff" size="60"></u-icon> -->
            </view>
            <view class="vedio" @tap="goSpots((type = 'video'))">
              <image src="@/static/active/video.png"></image>
              <!-- <view style="line-height: 100rpx">视频</view>
              <u-icon name="camera-fill" color="#fff" size="60"></u-icon
            > -->
            </view>
          </view>
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: "关注",
        },
        {
          name: "精选",
        },
        {
          name: "圈子",
        },
      ],
      current: 0,
      num: 1,
      data: [
        { id: 1, statu: true, num: 1 },
        { id: 2, statu: false, num: 2 },
        { id: 3, statu: false, num: 3 },
      ],
      showComment: false,
    };
  },
  methods: {
    change(index) {
      this.current = index;
    },
    addFriends() {
      uni.navigateTo({
        url: "/pages/community/addfriends/addfriends",
      });
    },
    publishComment() {
      this.showComment = true;
    },
    goSpots(type) {
      uni.navigateTo({
        url: "/pages/tabbar/community/posts?type=" + type,
      });
    },
    gotodrafts() {
      uni.navigateTo({
        url: "/pages/community/drafts/drafts",
      });
    },
    gotofriends() {
      uni.navigateTo({
        url: "/pages/community/addfriends/addfriends",
      });
    },
    // goSearch(){
    // 	uni.navigateTo({
    //     url: "/pages/community/addfriends/addfriends",
    //   });
    // }
    // choose(){
    // 	this.num=num
    // }
  },
};
</script>

<style lang="scss">
page {
  background-color: #eeeeee;
}
.top {
  width: 750rpx;
  height: 172rpx;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  z-index: 10;
  .left {
    width: 400rpx;
    height: 100%;
    // border: 1px solid blue;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    .tab {
      width: 100%;
    }
    .top-top {
      width: 150rpx;
      height: 100%;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      flex-wrap: wrap;
      position: relative;
      .top {
        width: 30rpx;
        height: 30rpx;
        text-align: center;
        position: absolute;
        right: 16rpx;
        top: 46rpx;
        background-color: #ffff00;
        line-height: 1;
        font-weight: 600;
        font-size: 13px;
      }
      .sp {
        font-size: 46rpx;
        width: 100%;
        height: 120rpx;
        // border: 1px solid red;
        text-align: center;
        display: flex;
        align-items: flex-end;
        justify-content: center;
      }
      .but {
        margin: 0 auto;
        width: 42rpx;
        height: 6rpx;
        background: #f4333c;
        border-radius: 6rpx;
        overflow: hidden;
      }
    }
    .top-second {
      width: 150rpx;
      height: 100%;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      flex-wrap: wrap;
      // border: 1px solid red;
      .top {
        width: 20rpx;
        height: 20rpx;
      }
      .sp {
        font-size: 26rpx;
        width: 100%;
        height: 160rpx;
        // border: 1px solid red;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  .right {
    width: 200rpx;
    height: 100%;
    // border: 1rpx solid red;
    display: flex;
    align-items: center;
    justify-content: center;
    .right-user {
      // width: 100rpx;
      // height: 100%;
      // border: 1rpx solid blue;
      &:hover {
        cursor: pointer;
      }
      .addImg {
        width: 30rpx;
        height: 30rpx;
      }
    }
    .right-search {
      margin-left: 40rpx;
      // width: 100rpx;
      // height: 100%;
      // border: 1rpx solid blue;
      .search {
        width: 30rpx;
        height: 30rpx;
      }
    }
  }
}
.postsImg {
  padding: 30rpx;
  background-color: #f4333c;
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  position: fixed;
  bottom: 150rpx;
  right: 30rpx;
}
// .camera {
//   width: 100rpx;
//   height: 100rpx;
//   line-height: 100rpx;
//   text-align: center;
//   background-color: #f00;
//   position: fixed;
//   bottom: 150rpx;
//   border-radius: 50%;
//   right: 30rpx;

// }
/deep/.u-drawer-content {
  width: 90% !important;
  bottom: 50rpx;
  border-radius: 30rpx;
  overflow: hidden;
  margin: 0 auto;
}
.checkComment {
  // width: 80%;
  height: 300rpx;
  padding: 40rpx;
  background-color: #fff;
  margin: 0 auto;
  .email-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .share {
      color: #aaa;
    }
    .email {
      display: flex;
      align-items: center;
      .title {
        margin: 0 10rpx;
      }
    }
  }
  .check {
    margin-top: 30rpx;
    display: flex;
    justify-content: space-between;
    .posts,
    .vedio {
      width: 250rpx;
      height: 150rpx;
      // background-color: #5320ec;
      border-radius: 30rpx;
      display: flex;
      color: #fff;
      justify-content: space-around;
      image {
        width: 100%;
        height: 100%;
      }
    }
    // .vedio {
    //   width: 250rpx;
    //   height: 100rpx;
    //   color: #fff;
    //   background-color: #eb19f2;
    //   border-radius: 30rpx;
    //   display: flex;
    //   justify-content: space-around;
    // }
  }
}
.center {
  width: 100%;
  margin-top: 10rpx;
  .kb {
    width: 750rpx;
    height: 172rpx;
  }
  // height: 200rpx;
  // border: 1px solid red;
}
</style>
